
.online{
    width: 50px;
    z-index: 9;
    position: fixed;
    right: 15px;
    transition: all .6s ease;
    @media(max-width: 1440px){
        right: 5px;
    }
    @media(min-width: 992px){
        top: 40%;
    }
    @media(max-width: 991px) {
       bottom: -380px;
    }
    &.active{
        right: 5px;
        bottom: 80px;
    }
}
.online a{
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color:fade(#000,70%);
    position: relative;
    text-decoration: none;
    cursor: pointer;
    margin-top: 2px;
    &:after{
        font-family: "iconfont";
        content: '\e72e';
        color: #ffffff;
        font-size: 20px;
    }

    &.online-email{
        &:hover{background-color: #b4961a;}
    }
    &.online-skype{
        &:after{
            content: '\e616';
        }
        &:hover{background-color: #00aff0;}
    }
    &.online-whatsapp{
        &:after{
            content: '\e621';
        }
        &:hover{background-color: #13ae0a;}
    }

    &.online-tel{
        &:after{
            content: '\e61c';
        }
        &:hover{background-color: #00affb;}
    }
    &.online-weixin{
        &:after{
            content: '\e613';
            font-size: 23px;
        }
        &:hover{background-color: #3b589b;}
    }
    &.online-wechat{
        &:after{
            content: '\e604';
        }
        &:hover{background-color: #33d055;}
    }
    &.online-top{
        &:after{
            content: '\e605';
        }
        &:hover{background-color: #000;}
    }
}
.online a.online-tel p,
.online a.online-whatsapp p{
    position: absolute;
    right: 54px;
    top: 0px;
    width: 160px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.12);
    background-color: #ffffff;
    display: none;
}
.online a.online-wechat .erweima,
.online a.online-weixin .erweima{
    display: block;
    width: 130px;
    height: 160px;
    padding: 5px;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.12);
    position: absolute;
    right: 54px;
    top: 0px;
    z-index: 999;
    display: none;
    background-color: #ffffff;
    img{
        width: 100%;
    }
    p{
        text-align: center;
        margin: 0;
        padding: 0;
        font-size:13px;
        color:#888888;
        height: auto;
        line-height: 30px;
    }
}
// online------------------------------------------------------------end

.icon-online{
    position: fixed;
    bottom: 20px;
    right: 5px;
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    border-radius: 50%;
    display: none;
    z-index: 10;
    background-color: @color;
    transition: all .4s ease;
    @media(max-width: 991px){
        display: block;
    }
    &.icon{
        transform:rotate(45deg);
    }
}
